<template>
  <div v-show="visible" class="modal-overlay">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="modal-title">题型和难度配置</h3>
        <button class="modal-close-btn" @click="close">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="type-config-modal-flex">
        <!-- 左侧：难度选择 -->
        <div class="type-config-left-panel">
          <div class="difficulty-distribution-section slider-card">
            <div class="section-header strong">
              <i class="fas fa-signal"></i>
              <span>难度选择</span>
            </div>
            <div class="slider-labels">
              <span>简单</span>
              <span>中等</span>
              <span>困难</span>
            </div>
            <el-slider
              v-model="difficultyValue"
              :min="1"
              :max="10"
              :step="1"
              :show-tooltip="false"
              class="difficulty-slider"
              @input="onSliderChange"
            />
            <div class="slider-value-indicator" :style="{ color: difficultyColor }">
              <span class="slider-value-badge" :style="{ background: difficultyColor }">{{ difficultyValue }}</span>
              <span>{{ difficultyLabel }}</span>
            </div>
            
            <!-- 添加动画卡片 -->
            <div class="difficulty-animation-card" :class="difficultyLabel.toLowerCase()">
              <div class="animation-content">
                <div class="difficulty-icon">
                  <i :class="getDifficultyIcon"></i>
                </div>
                <div class="difficulty-waves">
                  <div class="wave wave1"></div>
                  <div class="wave wave2"></div>
                  <div class="wave wave3"></div>
                </div>
                <div class="difficulty-description">
                  <h4>{{ difficultyLabel }}难度</h4>
                  <p>{{ getDifficultyDescription }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="vertical-divider"></div>
        
        <!-- 右侧：题型选择 -->
        <div class="type-config-right-panel">
          <div class="type-distribution-section">
            <div class="section-header strong">
              <i class="fas fa-chart-pie"></i>
              <span>题型选择</span>
            </div>
            
            <!-- 添加题目总数显示 -->
            <div class="question-count-display">
              <div class="count-progress">
                <div class="progress-bar" :style="{ width: `${(totalQuestionCount / maxTotalQuestions) * 100}%`, background: isMaxQuestionsReached ? '#EF4444' : 'linear-gradient(90deg, #4361EE, #3A0CA3)' }"></div>
              </div>
              <div class="count-info">
                <span>题目总数: <span class="count-value" :class="{ 'count-max': isMaxQuestionsReached }">{{ totalQuestionCount }}/{{ maxTotalQuestions }}</span></span>
                <span v-if="!isMaxQuestionsReached">还可添加: <span class="count-remaining">{{ remainingQuestions }}</span> 题</span>
                <span v-else class="count-warning">已达到最大题数限制(30题)</span>
              </div>
            </div>
            
            <div class="type-distribution-list">
              <div
                v-for="type in questionTypes"
                :key="type.value"
                class="type-distribution-item"
                :class="{ 
                  'active': selectedTypes.includes(type.value),
                  'disabled': isMaxQuestionsReached && !selectedTypes.includes(type.value)
                }"
                @click="toggleType(type.value)"
              >
                <div class="type-icon" :style="{ backgroundColor: getTypeColor(type.value) }">
                  <i :class="type.icon"></i>
                </div>
                <div class="type-info">
                  <span class="type-name">{{ type.label }}</span>
                  <span class="type-count" v-if="selectedTypes.includes(type.value)">
                    {{ typeSelectionCounts[type.value] }} 题
                  </span>
                </div>
                <div class="type-controls" v-if="selectedTypes.includes(type.value)">
                  <button class="btn-count" @click.stop="decreaseCount(type.value)" :disabled="typeSelectionCounts[type.value] <= 1">
                    <i class="fas fa-minus"></i>
                  </button>
                  <span class="count-number">{{ typeSelectionCounts[type.value] }}</span>
                  <button 
                    class="btn-count" 
                    @click.stop="increaseCount(type.value)" 
                    :disabled="isMaxQuestionsReached"
                    :title="isMaxQuestionsReached ? '已达到最大题目数量限制 (30题)' : ''"
                  >
                    <i class="fas fa-plus"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="footer-actions">
          <button class="btn btn-cancel" @click="close">取消</button>
          <button
            class="btn btn-confirm"
            @click="confirm"
            :disabled="!canConfirm"
          >
            确认选择
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionTypeConfigModal',
  data() {
    return {
      visible: false,
      questionTypes: [
        { value: '0', label: '单选题', icon: 'fas fa-dot-circle', color: '#4361EE' },
        { value: '1', label: '多选题', icon: 'fas fa-check-double', color: '#3A0CA3' },
        { value: '2', label: '填空题', icon: 'fas fa-pencil-alt', color: '#F59E0B' },
        { value: '3', label: '判断题', icon: 'fas fa-balance-scale', color: '#10B981' },
        { value: '4', label: '简答题', icon: 'fas fa-comment-dots', color: '#EF4444' }
      ],
      selectedTypes: [],
      typeSelectionCounts: {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0
      },
      difficultyValue: 5, // 默认中等
      maxTotalQuestions: 30 // 最大题目总数限制为30题
    };
  },
  computed: {
    canConfirm() {
      return this.selectedTypes.length > 0 && 
             this.selectedTypes.some(type => this.typeSelectionCounts[type] > 0);
    },
    difficultyLabel() {
      if (this.difficultyValue <= 3) return '简单';
      if (this.difficultyValue <= 7) return '中等';
      return '困难';
    },
    difficultyColor() {
      if (this.difficultyValue <= 3) return '#10B981';
      if (this.difficultyValue <= 7) return '#F59E0B';
      return '#EF4444';
    },
    getDifficultyIcon() {
      if (this.difficultyValue <= 3) return 'fas fa-seedling';
      if (this.difficultyValue <= 7) return 'fas fa-fire';
      return 'fas fa-dragon';
    },
    getDifficultyDescription() {
      if (this.difficultyValue <= 3) return '适合入门学习，基础概念掌握';
      if (this.difficultyValue <= 7) return '需要综合运用，适合强化训练';
      return '富有挑战性，需要深度思考';
    },
    // 计算当前选择的题目总数
    totalQuestionCount() {
      // 只计算已选中题型的数量总和
      return Object.entries(this.typeSelectionCounts)
        .filter(([type]) => this.selectedTypes.includes(type))
        .reduce((sum, [_, count]) => sum + count, 0);
    },
    // 计算是否已达到题目上限
    isMaxQuestionsReached() {
      return this.totalQuestionCount >= this.maxTotalQuestions;
    },
    // 计算剩余可添加的题目数量
    remainingQuestions() {
      return Math.max(0, this.maxTotalQuestions - this.totalQuestionCount);
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.resetState();
    },
    resetState() {
      this.selectedTypes = [];
      this.typeSelectionCounts = {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0
      };
      this.difficultyValue = 5;
    },
    getTypeColor(type) {
      const t = this.questionTypes.find(q => q.value === type);
      return t ? t.color : '#94A3B8';
    },
    toggleType(type) {
      if (this.selectedTypes.includes(type)) {
        // 已选中题型，允许取消选择
        this.selectedTypes = this.selectedTypes.filter(t => t !== type);
        // 从计数中移除该题型
        this.$delete(this.typeSelectionCounts, type);
      } else {
        // 未选中题型，准备选择
        // 检查是否已达到最大题目数
        if (this.isMaxQuestionsReached) {
          // 已达到最大题目数，不允许选择新题型
          this.$notify({
            title: '已达到最大题目数量',
            message: '请先减少已选择题型的数量或取消某些题型再添加新题型',
            type: 'warning',
            duration: 3000
          });
          return; // 直接返回，不执行选择操作
        }
        
        // 未达到最大题目数，允许选择
        this.selectedTypes.push(type);
        if (!this.typeSelectionCounts[type]) {
          this.$set(this.typeSelectionCounts, type, 1);
        }
      }
    },
    decreaseCount(type) {
      if (this.typeSelectionCounts[type] > 1) {
        this.typeSelectionCounts[type]--;
      }
    },
    increaseCount(type) {
      // 检查是否已达到总题数限制
      if (this.totalQuestionCount < this.maxTotalQuestions) {
        this.typeSelectionCounts[type]++;
      } else {
        // 添加提示通知用户已达到最大题目限制
        this.$notify({
          title: '已达到最大题目数量',
          message: '请减少其他题型数量或取消已选择的题型后再添加',
          type: 'warning',
          duration: 3000
        });
      }
    },
    onSliderChange(val) {
      this.difficultyValue = val;
    },
    confirm() {
      if (!this.canConfirm) return;
      
      const result = {
        types: this.selectedTypes.map(type => ({
          type,
          count: this.typeSelectionCounts[type]
        })),
        difficulty: {
          value: this.difficultyValue,
          label: this.difficultyLabel
        }
      };

      this.$store.dispatch('aiPanel/sendMessage', {
        prompt: `帮我生成题目， 题型配置：单选题${this.typeSelectionCounts['0'] || 0}道，多选题${this.typeSelectionCounts['1'] || 0}道，判断题${this.typeSelectionCounts['3'] || 0}道，填空题${this.typeSelectionCounts['2'] || 0}道，简答题${this.typeSelectionCounts['4'] || 0}道，难度等级：${this.difficultyLabel}（${this.difficultyValue}）`,
        silent: true  // 添加silent参数，表示不显示在对话界面
      }).catch(() => {});

      
      this.$emit('confirm', result);
      this.close();
    }
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-container {
  background-color: white;
  border-radius: 10px;
  width: 90vw;
  max-width: 900px;
  max-height: 80vh;
  min-height: 540px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.type-config-modal-flex {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
  min-height: 420px;
  padding: 1.5rem;
}

.type-config-left-panel {
  width: 260px;
  min-width: 220px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}

.type-config-right-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.section-header.strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4361EE;
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  letter-spacing: 0.5px;
}

.section-header.strong i {
  font-size: 1.35rem;
  color: #4361EE;
}

.difficulty-distribution-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px 0 rgba(67,97,238,0.07);
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.difficulty-slider {
  width: 100%;
  margin: 1rem 0;
}

.slider-value-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  justify-content: center;
  margin-top: 1rem;
}

.slider-value-badge {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 1rem;
  font-weight: 700;
}

.type-distribution-section {
  background-color: #fff;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px 0 rgba(67,97,238,0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.type-distribution-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  overflow-y: auto;
}

.type-distribution-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.type-distribution-item:hover {
  background-color: #f1f5f9;
}

.type-distribution-item.active {
  border-color: #4361EE;
  background-color: #eef2ff;
}

.type-distribution-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f1f2f6;
  border-color: #e2e4e8;
}

.type-distribution-item.disabled:hover {
  background-color: #f1f2f6;
  transform: none;
}

.type-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 1rem;
  font-size: 1.2rem;
}

.type-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.type-name {
  font-weight: 500;
  color: #1e293b;
}

.type-count {
  font-size: 0.875rem;
  color: #64748b;
}

.type-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-count {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-count:hover:not([disabled]) {
  background-color: #e2e8f0;
}

.btn-count[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.count-number {
  min-width: 20px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #334155;
}

.modal-header {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #4361EE, #3A0CA3);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  background-color: #f9fafb;
}

.footer-actions {
  display: flex;
  gap: 0.75rem;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel {
  background: #f3f4f6;
  color: #334155;
  border: 1px solid #e5e7eb;
}

.btn-cancel:hover {
  background: #e5e7eb;
}

.btn-confirm {
  background: #4361EE;
  color: white;
  border: none;
}

.btn-confirm:hover:not([disabled]) {
  background: #3A0CA3;
}

.btn-confirm[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.vertical-divider {
  width: 1px;
  background: #e5e7eb;
  margin: 0 1.5rem;
}

.difficulty-animation-card {
  margin-top: auto;
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.animation-content {
  position: relative;
  z-index: 2;
}

.difficulty-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
}

.difficulty-icon i {
  background: linear-gradient(135deg, currentColor 0%, rgba(255,255,255,0.5) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.difficulty-description {
  text-align: center;
}

.difficulty-description h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.difficulty-description p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
}

.difficulty-waves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  opacity: 0.3;
  border-radius: 40%;
  animation: wave 8s infinite linear;
}

.wave2 {
  animation-delay: -2s;
  opacity: 0.2;
}

.wave3 {
  animation-delay: -4s;
  opacity: 0.1;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.difficulty-animation-card.简单 {
  color: #10B981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.difficulty-animation-card.中等 {
  color: #F59E0B;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.difficulty-animation-card.困难 {
  color: #EF4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.difficulty-animation-card.简单 .wave {
  background: linear-gradient(135deg, #10B981 0%, transparent 70%);
}

.difficulty-animation-card.中等 .wave {
  background: linear-gradient(135deg, #F59E0B 0%, transparent 70%);
}

.difficulty-animation-card.困难 .wave {
  background: linear-gradient(135deg, #EF4444 0%, transparent 70%);
}

.question-count-display {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.count-progress {
  height: 6px;
  background-color: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.3s ease;
}

.count-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #64748b;
}

.count-value {
  font-weight: 600;
  color: #334155;
}

.count-value.count-max {
  color: #EF4444;
}

.count-remaining {
  font-weight: 600;
  color: #4361EE;
}

.count-warning {
  color: #EF4444;
  font-weight: 500;
}
</style> 